/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />

.spinner-container {
    // for centering the spinner
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
}

.spinner {
    position: relative;
    text-align: center;
    vertical-align: middle;
    display: none;
}

.spinner-container.active > .spinner,
.spinner.active {
    background-color: transparent;
    border: none;
    display: inline-block;
}

.spinner.spinner-boxed {
    line-height: 1;
    border-radius: 50%;
    padding: 0.2em;
    background-color: #fff !important;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
                0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.spinner-container.active {
    display: flex;
}

.spinner svg {
	transform-origin: 50% 50% 0;
    animation: spinner-rotate 1.333s linear infinite;
            
     html.ie & {
         animation: spinner-rotate-ie 2.5s linear infinite;
     } 
}

.spinner .circle {
	fill: transparent;
	stroke: #ff9800;
	stroke-linecap: round;
	stroke-dasharray: 200.96;
    stroke-dashoffset: 58px;
    animation: spinner-dash 1.333s linear infinite, spinner-colors 10.644s linear infinite;
	
     html.ie & {
         stroke-dashoffset: 80px;
     }       
}

@keyframes spinner-dash {
	0%      { stroke-dashoffset: 58px; } 
    50%     { stroke-dashoffset: 200.96px; } 
    100%    { stroke-dashoffset: 58px; }
}
@-webkit-keyframes spinner-dash {
	0%      { stroke-dashoffset: 58px; } 
    50%     { stroke-dashoffset: 200.96px; } 
    100%    { stroke-dashoffset: 58px; }
}

@keyframes spinner-rotate {
    50%     { transform: rotate(600deg); } 
    100%    { transform: rotate(720deg); }
}
@-webkit-keyframes spinner-rotate {
    50%     { transform: rotate(600deg); } 
    100%    { transform: rotate(720deg); }
}
@keyframes spinner-rotate-ie {
    50%     { transform: rotate(360deg); } 
    100%    { transform: rotate(720deg); }
}

@keyframes spinner-colors {
    0%      { stroke: #3F51B5; }
    20%     { stroke: #09b7bf; }
    40%     { stroke: #90d36b; }
    60%     { stroke: #F44336; }
    80%     { stroke: #f90; }
    100%    { stroke: #3F51B5; }
}
@-webkit-keyframes spinner-colors {
    0%      { stroke: #3F51B5; }
    20%     { stroke: #09b7bf; }
    40%     { stroke: #90d36b; }
    60%     { stroke: #F44336; }
    80%     { stroke: #f90; }
    100%    { stroke: #3F51B5; }
}

.spinner.white .circle {
    stroke: #fff;
    animation-name: spinner-dash, spinner-rotate;
}

.circular-progress {
    .wrapper {
        transform: rotate(-90deg);
    }

    .circle {
        stroke: $primary;
    }

    .circle, svg {
        animation: none;
    }

    .circle-below {
        stroke: #ccc;
    } 
    
    .progress-text {
        position: absolute;
        top: 50%;
        bottom: 0;
        left: 0;
        right: 0;
        font-weight: 600;
        font-size: 10px;
        color: $gray-600;
        transform: translateY(-50%);
        line-height: 1rem;
    }
}